<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="模块设计" name="1">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-card class="box-card">
                <div slot="header">效果预览</div>
                <div class="el-card_boby">
                  <img
                    src="@/assets/common/个性化头部.jpg"
                    alt=""
                    style="width: 100%"
                  />
                  <img
                    src="@/assets/common/导航栏.jpg"
                    alt=""
                    style="width: 100%"
                  />
                  <el-row :gutter="10" type="flex">
                    <img
                      src="@/assets/common/优质职位.jpg"
                      alt=""
                      style="width: 50%"
                    />
                    <img
                      src="@/assets/common/知名企业.jpg"
                      alt=""
                      style="width: 50%"
                    />
                  </el-row>
                  <div class="divider-line"></div>
                  <img
                    src="@/assets/common/名企招聘.jpg"
                    alt=""
                    style="width: 100%"
                  />
                  <div class="divider-line"></div>
                  <img
                    src="@/assets/common/热门职位.jpg"
                    alt=""
                    style="width: 100%"
                  />
                  <img
                    src="@/assets/common/文案编辑.jpg"
                    alt=""
                    style="width: 100%"
                  />
                  <img
                    src="@/assets/common/文案编辑2.jpg"
                    alt=""
                    style="width: 100%"
                  />
                </div>
              </el-card>
            </el-col>
            <el-col :span="18">
              <el-form ref="form" label-width="80px">
                <el-card>
                  <div style="padding: 20px">
                    <div class="module_tit">头部</div>
                    <div class="module_tit_body">
                      <el-form-item label="显示状态">
                        <el-radio-group v-model="radio">
                          <el-radio :label="3">显示</el-radio>
                          <el-radio :label="6">隐藏</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="选择布局">
                        <el-radio-group v-model="radio">
                          <el-radio :label="3">普通头部</el-radio>
                          <el-radio :label="6">带logo头部</el-radio>
                          <el-radio :label="6">纯色头部</el-radio>
                          <el-radio :label="6">搜索边压</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                    <div class="line"></div>
                    <div class="module_tit">菜单栏</div>
                    <div class="module_tit_body">
                      <el-form-item label="显示状态">
                        <el-radio-group v-model="radio">
                          <el-radio :label="3">显示</el-radio>
                          <el-radio :label="6">隐藏</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="选择布局">
                        <el-radio-group v-model="radio">
                          <el-radio :label="3">两行10图标1</el-radio>
                          <el-radio :label="6">两行10图标2</el-radio>
                          <el-radio :label="6">单行5图标</el-radio>
                          <el-radio :label="6">单行4图标</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                    <div class="line"></div>
                    <div class="module_tit">板块</div>
                    <div class="module_tit_body">
                      <el-form-item label="显示状态">
                        <el-radio-group v-model="radio">
                          <el-radio :label="3">显示</el-radio>
                          <el-radio :label="6">隐藏</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="选择板块">
                        <el-checkbox-group>
                          <el-checkbox
                            label="网络招聘会"
                            disabled
                          ></el-checkbox>
                          <el-checkbox label="知名企业" disabled></el-checkbox>
                          <el-checkbox label="附近职位" disabled></el-checkbox>
                          <el-checkbox label="高薪职位" disabled></el-checkbox>
                          <el-checkbox label="招聘会" disabled></el-checkbox>
                          <el-checkbox label="快速求职" disabled></el-checkbox>
                          <el-checkbox label="快速招聘" disabled></el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </div>
                    <div class="line"></div>
                    <div class="module_tit">公告栏</div>
                    <div class="module_tit_body">
                      <el-form-item label="显示状态">
                        <el-radio-group v-model="radio">
                          <el-radio :label="3">显示</el-radio>
                          <el-radio :label="6">隐藏</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="选择布局">
                        <el-radio-group v-model="radio">
                          <el-radio :label="3">单行滚动式</el-radio>
                          <el-radio :label="6">双行滚动式</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                  </div>
                </el-card>
                <!-- 保存 -->
                <el-form-item
                  label=""
                  style="margin-top: 20px; margin-left: 80px"
                >
                  <el-button type="primary">保存</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="菜单设置" name="2">
          <el-table :data="list" style="width: 100%">
            <el-table-column prop="title" label="菜单名称" width="width">
            </el-table-column>
            <el-table-column
              prop="custom_title"
              label="自定义名称"
              width="width"
            >
            </el-table-column>
            <el-table-column prop="link_url" label="跳转url" width="width">
            </el-table-column>
            <el-table-column prop="iconUrl" label="图标" width="width">
              <template slot-scope="scope">
                {{ scope.row.iconUrl === "" ? "系统默认" : "" }}
              </template>
            </el-table-column>
            <el-table-column prop="sort_id" label="排序" width="width">
            </el-table-column>
            <el-table-column prop="is_display" label="是否显示" width="width">
              <template slot-scope="scope">
                <el-tag :type="scope.row.is_display ? 'success' : 'danger'">{{
                  scope.row.is_display ? "显示" : "隐藏"
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width">
              <template>
                <el-button
                  type="primary"
                  size="small"
                  @click="editHomePageDialog = true"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="编辑菜单" :visible.sync="editHomePageDialog" width="35%">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="菜单名称">
          <el-input placeholder="" disabled style="width: 75%">招聘会</el-input>
        </el-form-item>
        <el-form-item label="自定义名称">
          <el-input placeholder="" style="width: 75%">北仑人才市场</el-input>
        </el-form-item>
        <el-form-item label="自定义图标">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input placeholder="" style="width: 75%"
            >http://blrc.nbohrs.cn/market</el-input
          >
        </el-form-item>
        <el-form-item label="排序">
          <el-input placeholder="" style="width: 75%"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="model"></el-switch>
        </el-form-item> 
        <el-row :gutter="10" type="flex" justify="center">
          <el-button type="primary">保存</el-button>
          <el-button @click="editHomePageDialog = false">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: true,
      editHomePageDialog: false,
      activeName: "1",
      list: [
        {
          id: 8,
          alias: "jobfair",
          title: "招聘会",
          custom_title: "北仑人才市场",
          icon: 0,
          link_url: "http:\/\/blrc.nbohrs.cn\/market",
          sort_id: 1061,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 1,
          alias: "resume_add",
          title: "创建简历",
          custom_title: "求职登记",
          icon: 0,
          link_url: "",
          sort_id: 1060,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 3,
          alias: "job",
          title: "找工作",
          custom_title: "",
          icon: 0,
          link_url: "",
          sort_id: 99,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 5,
          alias: "company",
          title: "搜企业",
          custom_title: "",
          icon: 0,
          link_url: "",
          sort_id: 90,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 13,
          alias: "fastresume",
          title: "快速求职",
          custom_title: "人事招考",
          icon: 0,
          link_url:
            "https:\/\/share.blnews.com.cn\/webDetails\/sonPage?groupId=171370&id=7786068&tenantId=18&position=3&gaze_open=1",
          sort_id: 72,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 9,
          alias: "article",
          title: "职场资讯",
          custom_title: "最新资讯",
          icon: 0,
          link_url:
            "https:\/\/vapp.tmuyun.com\/webChannels\/normal?id=65ae28da71a9ed6a3cce1c24&code=rcsy&tenantId=18",
          sort_id: 71,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 7,
          alias: "high_wage",
          title: "高薪职位",
          custom_title: "直播带岗",
          icon: 0,
          link_url:
            "https:\/\/vapp.tmuyun.com\/webDetails\/sonPage?id=7930178&tenantId=18&groupId=171639",
          sort_id: 70,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 6,
          alias: "nearby",
          title: "附近职位",
          custom_title: "在线直聊",
          icon: 0,
          link_url: "\/m\/im\/imList",
          sort_id: 69,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 10,
          alias: "online_jobfair",
          title: "网络招聘会",
          custom_title: "招聘会",
          icon: 0,
          link_url: "",
          sort_id: 60,
          is_display: 0,
          iconUrl: "",
        },
        {
          id: 4,
          alias: "resume",
          title: "找人才",
          custom_title: "",
          icon: 0,
          link_url: "",
          sort_id: 30,
          is_display: 0,
          iconUrl: "",
        },
        {
          id: 2,
          alias: "job_add",
          title: "发布职位",
          custom_title: "",
          icon: 0,
          link_url: "",
          sort_id: 16,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 11,
          alias: "shortvideo",
          title: "视频招聘",
          custom_title: "",
          icon: 0,
          link_url: "",
          sort_id: 0,
          is_display: 1,
          iconUrl: "",
        },
        {
          id: 12,
          alias: "fastjob",
          title: "快速招聘",
          custom_title: "",
          icon: 0,
          link_url: "",
          sort_id: 0,
          is_display: 0,
          iconUrl: "",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped>
.divider-line {
  width: 100%;
  height: 4px;
  background-color: #f3f3f3;
}
.el-card_boby {
  padding: 0 !important;
}
.module_tit {
  margin-bottom: 20px;
  border-left: 6px solid #409eff;
  padding-left: 10px;
}
.line {
  margin: 20px 0;
  background-color: #dcdfe6;
}
.el-form-item {
  max-width: 900px;
}
</style>
